<template>
  <my-pannel headerTitle="Download File Pannel">
    <el-col :span="18">
      <el-select
        v-model="selectedResults"
        multiple
        collapse-tags
        collapse-tags-tooltip
        placeholder="Select to Download"
        value-key="fileName"
      >
        <div v-for="item in traObjects" :key="item.fileName">
          <el-option
            :label="item.fileName"
            :value="item"
            v-if="item.fileName.endsWith('_compress') || item.fileName.endsWith('_cluster')"
          />
        </div>
      </el-select>
    </el-col>
    <el-col :span="6">
      <el-button type="primary" @click="downLoadFile(selectedResults)">
        <el-icon><Download /></el-icon>
      </el-button>
    </el-col>
  </my-pannel>
</template>

<script>
import MyPannel from '@/components/MyPannel.vue';
import { ClusterTraObject } from '@/util/type/ClusterTraObject';
import { mapState } from 'vuex';
import { LineStringFeatures } from '@/util/type/GeoJsonLineString.js';
export default {
  data() {
    return {
      selectedResults: [],
    };
  },
  computed: {
    ...mapState(['traObjects']), //从vuex获取轨迹对象集合
  },
  methods: {
    downLoadFile(content) {
      for (let item of content) {
        let features = new LineStringFeatures(); //创建线要素geojson对象
        if (item instanceof ClusterTraObject)
          features.transToGeoJson(
            item['coordsList'],
            item.labels.map((label) => {
              return { label: label };
            }),
          );
        //将聚类结果进行转换
        else features.transToGeoJson(item['coordsList']); //将压缩结果进行转换
        // 创建 Blob 对象
        let blob = new Blob([features.toString()]);
        // 创建链接元素
        let link = document.createElement('a');
        // 设置链接的 href 属性为 Blob 对象的临时 URL
        link.href = URL.createObjectURL(blob);
        // 设置下载的文件名
        link.download = `${item.fileName}.json`;
        // 点击链接触发下载
        link.click();
        // 释放 Blob 对象的 URL
        URL.revokeObjectURL(link.href);
      }
    },
  },
  components: {
    MyPannel,
  },
};
</script>

<style lang="scss" scoped>
.el-select {
  :deep(.el-input__inner) {
    font-size: $middle-font-size;
  }
}
</style>
